<script setup>
import _ from 'lodash'
import {onMounted, ref, watch} from "vue";

const dft = {
  enable: false,
  offset: 0,
  side: 'top',
  container: ''
};

const modelValue = defineModel()
const props = defineProps({
  eleDef: {
    type: Object
  },
  currentItemElCode: String,
  // node: Object
})

const sticky = ref(null)

watch(() => modelValue.value, (newVal, oldVal) => {
  willReceiveProps(newVal, oldVal)
}, {deep: true})

watch(() => sticky.value, (info) => {
  sticky.value = info
}, {deep: true})

watch(() => props.currentItemElCode, () => {
  init();
})

onMounted(() => {
  init()
})

const willReceiveProps = (newVal) => {
  if (!newVal || !$utils.deepEquals(newVal, sticky.value)) {
    init();
  } else {
    // console.log('一样 ... ');
  }
}

const init = async () => {
  sticky.value = _.merge({}, dft, modelValue.value);
}
</script>

<template>
  <div class="ele-prop-item">
    <el-form label-width="60px" label-position="top" size="mini" v-if="sticky">
      <el-form-item label="">
        <div style="display: flex;justify-content: space-between;align-items: center;min-height: 28px;">
          <el-switch v-model="sticky.enable"></el-switch>
        </div>
      </el-form-item>
      <template v-if="sticky.enable">
        <el-form-item label="父容器">
          <el-radio-group v-model="sticky.container">
            <el-radio label="parent">父容器</el-radio>
            <el-radio label="body">页面</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="粘性位置">
          <el-radio-group v-model="sticky.side">
            <el-radio label="top">上框</el-radio>
            <el-radio label="bottom">下框</el-radio>
            <el-radio label="both">上下</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="偏移距离" v-tippy="{ arrow: true }" content="延迟开始/列表项逐个延迟的时间">
          <el-input v-model="sticky.offset" size="mini"></el-input>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
